<template>
    <div
      class="right-panel"
      :class="{ 'right-panel-none': !rightPanel || !rightPanelShow }"
      v-if="rightPanelShow"
    >
      <component :is="rightPanel"> </component>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Video from "./CVideo.vue";
@Component({
  name: "RightPanel",
  components: {
    Video,
  }
})
export default class extends Vue {
  get rightPanel() {
    return this.$store.getters["videoPanel/rightPanel"];
  }
  get rightPanelShow() {
    return this.$store.getters["videoPanel/rightPanelShow"];
  }
  mounted(){
  }


}
</script>

<style lang="scss" scoped>
.right-panel {
  position: absolute;
  height: 987px;
  width: 468px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: none;
  align-content: flex-start;
  background: #001022;
  padding: 0 20px;
  & > * {
    pointer-events: auto;
  }
  &.right-panel-none {
    width: 0px;
    height: 0px;
  }
}
</style>
